const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',//确保打包后的所有静态资源(css/js/图片)在html文档中以 ./开头 , 可以正常加载资源文件. 
  devServer: {//设置开发服务器
    proxy: {//设置代理
      //这个地方设置 '/api' 是以为项目的接口都是以/api开头的

      '/api': {//以'api'开头的请求会自动转发到target表示的服务器
        target: "http://waimai.yantianfeng.com/",//设置目标服务器地址
        changeOrigin: true,//允许跨域
        pathRewrite: {}//重写请求地址
      },

      //如果项目的接口 一部分以/user开头, 一部分以/shop开头, 一部分以/address开头 , 设置多个代理是很麻烦的, 
      // '/user':{
      //   target:'http://waimai.yantianfeng.com/',
      //   changeOrigin:true,
      //   pathRewrite:{}
      // },
      // '/shop':{
      //   target:'http://waimai.yantianfeng.com/',
      //   changeOrigin:true,
      //   pathRewrite:{}
      // },
      // '/address':{
      //   target:'http://waimai.yantianfeng.com/',
      //   changeOrigin:true,
      //   pathRewrite:{}
      // },

      //可以临时给这些接口添加统一的前缀 /api2 , 这时所有的接口变成 
      //  /api2/user/xxx
      //  /api2/shop/xxx
      //  /api2/address/xxx

      // 现在我(程序员) 只需要设置一个代理即可, 类似下面这样
      // '/api2':{
      //   target:'http://waimai.yantianfeng.com/',
      //   changeOrigin:true,
      //   pathRewrite:{ //路径重写
      //     '^/api2':'/'
      //   }
      // }
      //但是由于实际的接口是不包括 /api2 这部分的. 这时可以用pathRewrite设置路径重写,去掉/api2这部分.
      //最终发出去的请求地址就是:  /user/xxx     /shop/xxxx    /address/xxxx

    }
  }
})
